<template>
  <div class="clearfix">
    <!-- 列表 -->
    <div class="query-model" v-loading="loading">
      <div class="list">
        <div
          class="item transition"
          v-for="(item, key) in list"
          :key="key"
          @click="link(item)"
        >
          <div class="user_info" v-if="item.userName !== 'system'">
            <div class="portrait">
              <el-avatar
                shape="square"
                :size="48"
                :src="getUrl(item.siteLogo)"
              ></el-avatar>
            </div>
            <div class="info">
              <div class="account">
                {{ item.userName | across }}
              </div>
              <div class="createTime">{{ item.articleTime | across }} 发布</div>
            </div>
          </div>
          <div class="content">
            <div class="title">
              <p
                v-html="
                  highlightTitle('', item.title, 'TI', form.field, form.content)
                "
              ></p>
              <span class="span" v-if="item.userName == 'system'">{{
                item.articleTime | across
              }}</span>
            </div>
            <div
              class="abstract"
              v-html="
                highlightTitle(
                  item.intro,
                  item.content,
                  'FT',
                  form.field,
                  form.content
                )
              "
            ></div>
            <div class="author" v-if="item.authors">
              <i class="el-icon-user"></i>作者：{{ item.authors | across }}
            </div>
          </div>
        </div>
        <div class="no-data" v-if="!loading && !list.length">
          <el-empty description="暂无数据"></el-empty>
        </div>
      </div>
      <pagination
        @getList="getList"
        :form.sync="form"
        :total="total"
      ></pagination>
    </div>
    <!-- 详情 -->
    <detail
      v-if="detailVisible"
      :visible.sync="detailVisible"
      :id="id"
    ></detail>
  </div>
</template>

<script>
import Mixin from "@/mixins/list";
import apiCode from "@/api/apiConfig";
import imgDict from "@/utils/img";
import { mapState } from "vuex";

export default {
  name: "query",
  mixins: [Mixin],
  components: {},
  filters: "",
  data() {
    return {
      imgDict,
    };
  },
  watch: {
    $route(value) {
      if (value.query.date) {
        this.getSearchList();
      }
      if (value.query) {
        this.init(value.query);
      }
    },
  },
  computed: {
    ...mapState("menuTabs", {
      queryArr: "queryArr",
    }),
  },
  created() {
    this.init(this.$route.query);
    // 监听列表刷新事件
    this.$on("global:queryFresh", () => {
      this.getList();
    });
  },
  methods: {
    // 初始化
    init(row) {
      // TODO  二次搜索
      if (row.content) {
        this.form.type = row.type || "99";
        this.form.content = row.content;
        this.form.field = row.field;
        this.getList();
      }
    },
    getUrl(str) {
      if (str) {
        let key = str.split(".")[0];
        return imgDict[key];
      } else {
        return "";
      }
    },
    highlightTitle(val1, val2, currenField, field, keyword) {
      let val = val1 || val2;
      if (val || val === 0) {
        if (currenField === field || field === "ALL" || field === undefined) {
          if (val.indexOf(keyword) > -1) {
            let str = val.split(keyword);
            return str.join(`<span style="color:red">${keyword}</span>`);
          } else {
            return val;
          }
        } else {
          return val;
        }
      } else {
        return "-";
      }
    },
    // 获取列表
    async getList() {
      this.list = [];
      this.loading = true;
      let { pageSize = 10, pageNum = 0 } = this.form;
      let result = await this.$post(
        `api/content/query?pageNum=${pageNum - 1}&pageSize=${pageSize}`,
        this.form
      );
      this.loading = false;
      this.changeList(result);
    },
    async getSearchList() {
      this.list = [];
      this.loading = true;
      let result = await this.$post(
        `api/content/search?pageNum=0&pageSize=10`,
        {
          parameters: this.queryArr,
        }
      );
      this.loading = false;
      this.changeList(result);
    },
    changeList(result) {
      // TI=标题  FT=内容 undefined=全部
      if (result && result.code === apiCode.code.success) {
        const { content, totalElements } = result.data;
        if (content.length) {
          this.$store.commit("menuTabs/isTwoSearchChange", true);
        } else {
          this.$store.commit("menuTabs/isTwoSearchChange", false);
        }
        this.list = content || [];
        this.total = totalElements || 0;
      }
    },
    // 详情 文章来源类型：sourceType：1 原创 ； 2 爬虫
    link(row) {
      if (row.sourceType === "2") {
        window.open(row.targetUrl, "_blank");
      } else {
        this.$detail(row.id);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.query-model {
  .list {
    @include scroll-beautify(0, transparent, transparent, scroll);
    height: calc(100vh - 178px);

    .item {
      background-color: $white;
      position: relative;
      line-height: 24px;
      cursor: pointer;
      padding: 15px;

      & + .item:before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        left: 15px;
        height: 1px;
        background-color: $f5;
      }

      &:hover {
        background-color: $f9fafb;
      }

      .user_info {
        .portrait {
          height: 48px;
          float: left;
        }

        .info {
          padding-left: 58px;

          .account {
            font-size: 16px;

            .follow {
              background-color: $c1c1c1;
              display: inline-block;
              border-radius: 50px;
              text-align: center;
              line-height: 24px;
              font-size: 12px;
              cursor: pointer;
              color: $white;
              float: right;
              width: 80px;

              &.active {
                background-color: $mc;
              }
            }
          }
        }
      }

      .content {
        .title {
          font-weight: bold;
          font-size: 18px;
          margin: 10px 0;
          display: flex;
          .span {
            font-size: 16px;
            font-weight: 400;
            margin-left: 10px;
            color: #cccc;
          }
        }

        .abstract {
          font-size: 12px;
          color: $cc;
        }

        .author {
          font-size: 12px;
          color: $ccc;

          > i {
            margin-right: 5px;
          }
        }
      }
    }
  }
}
</style>
